<template>
  <a-layout-footer class="footer">
    <!-- 上部分：两列布局 -->
    <div class="footer-upper">
      <a-row :gutter="[24, 24]">
        <!-- 第一列：明凡云 -->
        <a-col :xs="24" :sm="12" :md="12">
          <div class="footer-column">
            <div class="footer-brand">
              <img class="footer-logo" src="@/assets/LOGO.png" alt="logo" />
              <span class="brand-name">明凡云</span>
            </div>
            <div class="footer-links">
              <a href="#" class="footer-link">《用户协议》</a>
              <a href="#" class="footer-link">《隐私政策》</a>
            </div>
          </div>
        </a-col>
        <!-- 第二列：关注我们 -->
        <a-col :xs="24" :sm="12" :md="12">
          <div class="footer-column">
            <div class="footer-title">关注我们</div>
            <div class="footer-qr-container">
              <div class="qr-placeholder">二维码</div>
              <div class="qr-text">
                <div>扫码关注</div>
                <div>明凡云公众号</div>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
    <!-- 下部分：版权信息 -->
    <div class="footer-lower">
      <div class="footer-copyright">
        <span>© {{ currentYear }} 明凡云. All rights reserved.</span>
        <a href="https://beian.miit.gov.cn/" target="_blank" class="footer-link"
          >豫ICP备2023032536号</a
        >
        <a href="#" class="footer-link">关于我们</a>
      </div>
    </div>
  </a-layout-footer>
</template>

<script lang="ts" setup>
const currentYear = new Date().getFullYear();
</script>

<style scoped>
.footer {
  background: #ffffff;
  padding: 40px 20px 20px;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid #f0f0f0;
}

.footer-upper {
  max-width: 1200px;
  margin: 0 auto 30px;
  padding: 0 40px;
}

.footer-lower {
  border-top: 1px solid #f0f0f0;
  padding-top: 20px;
  text-align: center;
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-column:first-child {
  align-items: center;
  text-align: center;
}

.footer-column:last-child {
  align-items: center;
  text-align: center;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.footer-logo {
  height: 24px;
  width: auto;
}

.brand-name {
  font-size: 16px;
  font-weight: 500;
  color: #000;
}

.footer-title {
  font-size: 16px;
  font-weight: 500;
  color: #000;
  margin-bottom: 8px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-link {
  color: #666;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s;
}

.footer-link:hover {
  color: #1890ff;
}

.footer-qr-container {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.qr-placeholder {
  width: 80px;
  height: 80px;
  background: #f5f5f5;
  border: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #999;
}

.qr-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  color: #666;
}

.footer-copyright {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  color: #666;
  font-size: 14px;
}

.footer-copyright span {
  color: #666;
}

@media (max-width: 992px) {
  .footer-upper {
    padding: 0 30px;
  }
}

@media (max-width: 768px) {
  .footer-upper {
    padding: 0 20px;
  }

  .footer-column:first-child,
  .footer-column:last-child {
    align-items: center;
    text-align: center;
  }

  .footer-qr-container {
    justify-content: center;
    flex-wrap: wrap;
  }

  .footer-copyright {
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .footer-upper {
    padding: 0 15px;
  }
}
</style>
